<!--
 * @Author: your name
 * @Date: 2021-03-22 18:54:06
 * @LastEditTime: 2021-03-23 17:31:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \training-group-5-warehouse\danshang-admin\src\views\shop\commodityManagement\components\RecycleDirlog.vue
-->
<!-- 商品回收站 -->
<template>
  <div
    class="dirlogFunctionality"
    :class="flag ? 'active' : 'actives'"
    style="
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    "
  >
    <div
      class="box"
      style="
      width: 1200px;
      height: 700px;
      background: #fff;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      padding:0 20px ;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      flex-direction: column;
      margin: 0 100px;
      "
    >
      <div
        class="vanish"
        style="
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        "
      >
        <span />
        <span style="cursor: pointer;" @click="handleOnCancel">X</span>
      </div>
      <div class="content" style="flex: 1; width: 100%;  overflow: scroll;">
        <el-table
          :data="list"
          border
          fit
          highlight-current-row
          style="width: 100%"
          :default-sort="{ prop: 'rank', order: 'descending' }"
          @sort-change="sortChange"
        >
          <el-table-column
            align="center"
            label="ID"
            width="45"
            element-loading-text="请给我点时间！"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column class-name="status-col" label="商品图" width="90">
            <template slot-scope="scope">
              <img
                :src="scope.row.image_uri"
                alt
                style="width: 50px; height: 50px;"
              >
            </template>
          </el-table-column>
          <el-table-column min-width="200px" label="商品名称">
            <template slot-scope="{ row }">
              <span>{{ row.title }}</span>
            </template>
          </el-table-column>

          <el-table-column width="90px" align="center" label="商品售价">
            <template slot-scope="scope">
              <span>{{ scope.row.price }}</span>
            </template>
          </el-table-column>

          <el-table-column width="90px" label="销量">
            <template slot-scope="scope">
              <span>{{ scope.row.volume }}</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="库存" width="90">
            <template slot-scope="scope">
              <span>{{ scope.row.repertory }}</span>
            </template>
          </el-table-column>

          <el-table-column
            class-name="status-col"
            label="排序"
            width="90"
            sortable
            prop="rank"
          />
          <el-table-column class-name="status-col" label="状态" width="110">
            <template slot-scope="{ row }">
              <el-switch
                v-model="row.status"
                active-color="#1890ff"
                inactive-color="#ff4949"
              />
            </template>
          </el-table-column>
          <el-table-column width="180px" align="center" label="操作时间">
            <template slot-scope="scope">
              <span>{{
                scope.row.timestamp | parseTime("{y}-{m}-{d} {h}:{i}")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="{ row }">
              <div style="fontSize: 12px;">
                <span
                  style="margin: 5px; color: #1890ff; cursor: pointer;"
                  @click="handleRecycle(row)"
                >编辑</span>
                <span
                  style="margin: 5px; color: #1890ff; cursor: pointer;"
                  @click="handleShowAddRecycle(row)"
                >恢复商品</span>
                <span
                  style="margin: 5px; color: #1890ff; cursor: pointer;"
                  @click="handleDleList(row)"
                >删除</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 显示开关
    flag: {
      type: Boolean,
      default: false,
      required: false
    },
    // 回收站商品数据
    list: {
      type: Array,
      default: () => [],
      required: false
    }
  },
  data() {
    return {}
  },
  methods: {
    // 显示隐藏监听事件
    handleOnCancel() {
      this.$emit('handleCancel')
    },
    // 排序
    sortChange(column, prop, order) {
      const data = this.list.sort((a, b) => {
        if (column.order === 'ascending') {
          return a.rank - b.rank
        } else {
          return b.rank - a.rank
        }
      })
      this.list = data
    },
    // 恢复商品
    handleShowAddRecycle(val) {
      this.$emit('handleAddList', val)
    },
    // 删除商品
    handleDleList(val) {
      this.$emit('handleDleList', val)
    },
    // 编辑
    handleRecycle(val) {
      this.$emit('handleRecycle', val)
      console.log(val)
    }
  }
}
</script>
<style scoped lang="scss">
.dirlogFunctionality.active {
  display: block;
}
.dirlogFunctionality.actives {
  display: none;
}
</style>
